// import CountUI from "../components/Count"
// 引入Count的ui组件

import { connect } from "react-redux"
import React, { Component } from "react"

// 引入connect 用于连接UI组件和redux

// mapStateToProps 用于传递状态
// function mapStateToProps(count) { // 一般写法
//   // 函数返回的对象 作为状态传递给UI组件
//   return { count }
// }

// mapDisPatchToProps 用于传递操作状态的方法
// function mapDisPatchToProps(dispatch) {// 一般写法
//   // 函数返回的对象 作为状态传递给UI组件
//   return {
//     jia: (count) => {
//       dispatch({ type: "increment", data: count })
//     },
//     jian: (count) => {
//       dispatch({ type: "decrement", data: count })
//     },
//     jiaAsync: (count, time = 200) => {
//       setTimeout(() => {
//         dispatch({ type: "increment", data: count })
//       }, time)
//     },
//   }
// }

class CountUI extends Component {
  // 加法
  adds = () => {
    const { value } = this.seleceNumber
    this.props.jia(value * 1)
  }

  // 减法
  decs = () => {
    const { value } = this.seleceNumber
    this.props.jian(value * 1)
  }

  // 奇数再加
  ifOdd = () => {
    const { value } = this.seleceNumber
    if (this.props.count % 2 !== 0) {
      this.props.jia(value * 1)
    }
  }
  // 异步加
  AsyncAdd = () => {
    const { value } = this.seleceNumber
    this.props.jiaAsync(value * 1, 500)
  }
  render() {
    return (
      <>
        <h1>count组件</h1>
        <h4>person组件名字</h4>
        <ul>
          {this.props.person.map((p) => {
            return (
              <li key={p.name}>
                {p.name}----{p.age}
              </li>
            )
          })}
        </ul>
        <h1>当前值为：{this.props.count}</h1>&nbsp;&nbsp;
        <select ref={(c) => (this.seleceNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;&nbsp;
        <button onClick={this.adds}>+</button>&nbsp;&nbsp;
        <button onClick={this.decs}>-</button>&nbsp;&nbsp;
        <button onClick={this.ifOdd}>当前求和为奇数再加</button>&nbsp;&nbsp;
        <button onClick={this.AsyncAdd}>异步加</button>
        <hr />
      </>
    )
  }
}

export default connect(
  (state) => ({
    ...state,
  }),
  {
    //一般写法
    jia: (count) => (dispatch) => dispatch({ type: "increment", data: count }),
    jian: (count) => (dispatch) => dispatch({ type: "decrement", data: count }),
    jiaAsync: (count, time) => (dispatch) => {
      setTimeout(() => {
        dispatch({ type: "increment", data: count })
      }, time)
    },
  }
  //   {
  //     //简写
  //     jia:jiaFunction,
  //     jian:jianFunction,
  //     jiaAsync:jiaAsyncFunction
  //   }
)(CountUI)
// 容器和ui组件进行链接并暴露
